<template>
    <Layout>
        <Form ref="queryForm" :label-width="120" :loading="pageStatus.baseLoading">
            <Row class="query-form">
                <Col span="8">
				  <FormItem label='年份：' prop='year'>
				      <DatePicker class="query-form-el" placeholder="请选择年份" v-model='dataToQuery.yearDate' type="year"></DatePicker>
				  </FormItem>
                </Col>
                <Col span="8">
					<FormItem >      
					</FormItem>
                </Col>
                <Col span="8">
					<Button @click="reset" class="ivu-btn-reset">重置</Button>
					<Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>
		<Table ref='table' :height="tableHeight" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading || pageStatus.baseLoading'
		       border :columns="columns1"  :data="dataTable" >
		</Table>
		<!-- <Row style="margin-right:10px;">
		  <Col span="24" >
		    <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
		  </Col>
		</Row> -->
    </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {formatDate,createFormAndSubmit} from '@/tools/index'
import _deepclone from 'lodash/cloneDeep'
import { mapState, mapGetters, mapActions } from 'vuex'
var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components: {cascaderDom},
        data() {
            return {
				...this.createCommonDataField(),
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 200,
                        title: '所属单位',
                        align: 'center',
                        key: 'traOrgName',
                    },
					{
					    minWidth: 110,
					    title: '培训年份',
					    align: 'center',
					    key: 'year',
					},
                    {
                        minWidth: 100,
                        title: '数量',
                        align: 'center',
                        key: 'countNum',
                    }
                ],
				tableHeight:10,
				queryUrl:Api.scheduleStatistics,
            }
        },
		async mounted() {
		  this.setTableHeight();
		  this.query();
		},
        methods: {
			...pageCommonFunction,
			query() {
				if(!this.dataToQuery.yearDate) {
				    this.dataToQuery.yearDate = new Date();
				}
				if(this.dataToQuery.yearDate) {
				  this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
				}
				this.queryAjax();
			}
        }
    }
</script>

<style lang='css' scoped>
	@import '../../../index.css';
</style>
